import React, { useEffect, useState } from "react"
import { PropsTypes, classFicationThree } from "./types"
import { Form, FormInstance, Input, Modal, Spin, message } from "antd"
import { ceate } from "@/api/addclassification"

const Addclassification: React.FC<PropsTypes> = (props) => {
    const [titel, setTitel] = useState("")
    const [loading, setLoading] = useState(false)
    const formRef = React.useRef<FormInstance>(null);
    const handleCancel = () => {
        close(false)
    }
    const handleOk = async () => {
        const validata: classFicationThree = await formRef?.current?.validateFields()
        const d = {
            ...validata,
            shop: props.shop,
            parentUuid: props.ParentUuid,
            childUuids: props.data.childUuids.join() || ""
        }
        d.order = Number(d.order)
        setLoading(true)
        ceate(d).then(() => {
            message.success("新建成功")
            close(true)
        }).catch().finally(() => {
            setLoading(false)
        })
    }
    const close = (loadList: boolean) => {
        props.change(false, loadList)
    }
    useEffect(() => {
        if (props.data.uuid) {
            setTitel("修改分类")
            formRef?.current?.setFieldsValue({
                ...props.data,
            })
        } else {
            setTitel("新增分类")
        }

    }, [props.data, props.data.uuid, props.show])
    return (
        <div>
            <Modal title={titel} open={props.show} onOk={handleOk} onCancel={handleCancel}>
                <Spin spinning={loading}>
                    <Form
                        name="basic"
                        labelCol={{ span: 6 }}
                        autoComplete="off"
                        ref={formRef}
                    >

                        <Form.Item<classFicationThree>
                            label="分类名称"
                            name="name"
                            rules={[{ max: 12 }, { required: true, message: '请输入分类名称' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item<classFicationThree>
                            label="分类图片"
                            name="picture"
                            rules={[{ max: 12 }, { required: true, message: '请选择分类图片' }]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item<classFicationThree>
                            label="分类简介"
                            name="notes"
                            rules={[{ required: true, message: '请选择分类图片' }]}
                        >
                            <Input.TextArea />
                        </Form.Item>
                        <Form.Item<classFicationThree>
                            label="分类排序"
                            name="order"
                            rules={[{ required: true, message: '请选择分类排序' }]}
                        >
                            <Input type="number" />
                        </Form.Item>
                    </Form>
                </Spin>
            </Modal>
        </div>
    )
}
export default Addclassification